<template>
    <div class="table-view-wrapper">
        <div :class="[ 'query-wrapper']" ref="queryRef">
            <!--form-->
            <slot name="formSlot"></slot>
            <div class="block-control-wrapper" @click="handlerBlockControl" v-show="showBlockControl">
                <i class="el-icon-arrow-down" v-if="blockFlag"></i>
                <i class="el-icon-arrow-up" v-else></i>
            </div>
        </div>

        <div class="table-body-wrapper">
            <el-row class="btn-wrapper">
                <el-col :xs="16" :sm="18" :md="19" :lg="19" :xl="21">
                    <slot name="btnBeforeSlot"></slot>
                </el-col>
                <el-col :xs="8" :sm="6" :md="5" :lg="5" :xl="3">
                    <slot name="btnAfterSlot"></slot>
                </el-col>
            </el-row>
            <slot name="tableSlot"></slot>
            <slot name="paginationSlot" class="pagination-wrapper"></slot>
        </div>

        <slot name="otherSlot"></slot>
    </div>
</template>

<script>
    export default {
        name: "TableView",
        data() {
            return {
                blockFlag: true,
                initFormheight: ''
            }
        },
        props: {
            showBlockControl: {
                type: Boolean,
                default: true
            }
        },
        methods: {
            handlerBlockControl() {
                if (this.blockFlag) {
                    const formRef = this.$children[0].$el;
                    formRef.style.height = '51px';
                    formRef.style.overflow = 'hidden';
                    formRef.style.transition = '.5s';
                } else {
                    const formRef = this.$children[0].$el;
                    formRef.style.height = this.initFormheight;
                    // formRef.style.minHeight = '51px';
                    formRef.style.transition = '.5s';
                }
                this.blockFlag = !this.blockFlag;
            }
        },
        mounted() {
            this.initFormheight = this.$children[0].$el.offsetHeight + "px";
            this.initFormheight = this.$children[0].$el.offsetHeight + "px";

            this.$children.forEach(item => {
                // console.log("----------2--------",item.$el.)
            })
            if (this.showBlockControl) {
                const formRef = this.$children[0].$el;
                formRef.style.height = '51px';
                formRef.style.overflow = 'hidden';
                this.blockFlag = !this.blockFlag;
            }
        }
    }
</script>

<style scoped lang="less">
    @import "./tableView.less";
</style>
